<template>
  <zm-view ref="view">
    <!-- 顶部 -->
    <view class="flex flex-col px-24 pt-24 pb-24 bg-white">
      <u-search v-model="search" placeholder="输入影片名称进行搜索" :show-action="false" height="62rpx" :input-style="{ 'font-size': '24rpx' }" @change="onSearchChange"></u-search>
    </view>

    <!-- 列表 -->
    <zm-list ref="list" :options="options" @query="handleQuery">
      <view v-for="(item, index) in filterList" :key="index" class="flex flex-col px-24 mt-20">
        <film-card-horizontal :data="item" :show-button="false"> </film-card-horizontal>
      </view>
    </zm-list>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      search: "",
      saleOrderNo: "",
      list: [],
      filterList: [],
      options: { emptyText: "暂无适用影片" }
    }
  },
  onLoad(options) {
    this.saleOrderNo = options.saleOrderNo
  },
  methods: {
    async handleQuery({ fail, success }) {
      try {
        const res = await uni.$api.coupon.getFilmByCoupon({ saleOrderNo: this.saleOrderNo })
        this.list = res
        this.filterList = res
        success({ list: this.filterList, total: this.filterList.length })
      } catch (e) {
        fail()
      }
    },
    onSearchChange() {
      // 使用debounce函数，500毫秒内只执行一次
      uni.$debounce(() => {
        // 过滤出搜索结果
        this.filterList = this.list.filter((item) => item.filmName.includes(this.search))
        // 重新设置列表，并设置空文本
        // this.$refs.list.reset({ list: this.filterList, total: this.filterList.length }, { emptyText: "没有找到相关影片" })
      }, 500)
    },
    onClickCityCell(city) {
      this.cityPopup = false
      this.cityId = city.cityId
      this.curCityName = city.regionName
      this.$refs.view.refresh()
    }
  }
}
</script>

<style lang="scss" scoped></style>
